<!DOCTYPE html>

<head>
	<meta charset="utf-8">
	<title>明代书信社交网络 | 中國歷代人物傳記資料庫（CBDB）数据可视化</title>
	<link rel="stylesheet" href="css/w3.css">
	<link rel="stylesheet" href="css/style.css">
</head>

<body>
	<div class="flex_title">
		<h1>明代书信社交网络</h1>
		<div style="display: flex; flex-direction: row; align-items: center;">
			<h2>—— 中國歷代人物傳記資料庫（CBDB）数据可视化</h2>
			<div id='question_mark' onmouseover="data_description(1)" onmouseout="data_description(0)"> ? </div>
			<div class="tooltip" id="data_tooltip">Harvard University, Academia Sinica, and Peking University, 
				China Biographical Database (CBDB) (January 1, 2018), https://projects.iq.harvard.edu/cbdb.</div>
		</div>
	</div>
	<div class="flex_row">
		<div class='flex_column' width=350px>
			<div id='center_person' class='introduction'>
				<div class='outer'>
					<div class='info'>
						<p class='person_name'></p>
						<p id='birthyear' class='line'></p>
						<p id='write_letter' class='line'></p>
						<p id='receive_letter' class='line'></p>
						<p id='std' class='line'></p>
					</div>
				</div>
			</div>
			<div id='birthyear_plot' class='birthyear_container'>
				<div id='point_tooltip' class='tooltip'></div>
				<svg></svg>
			</div>
		</div>
		<div class='flex_column'>
			<form id="color_by_select">
				<select onchange=re_color_graph(this)>
				<option value="by_birthyear">按出生年份</option>
				<option value="by_std">按通信对象年龄差标准差</option>
				</select>
			</form>
			<div id='graph_plot' class='graph_container'>
				<svg></svg>
				<div id='node_tooltip' class='tooltip'></div>
			</div>
		</div>
		<div class='flex_column' style='overflow-x: hidden;width: 350px; justify-content: left; align-items: left;'>
			<div class="outer-container">
				<div>
					<table class='pure-table'>
						<thead>
							<tr>
								<th width="100px" class="letter_title">标题</th>
								<th width="55px">通信人</th>
								<th width="40px">类别</th>
								<th width="120px">来源</th>
							</tr>
						</thead>
					</table>
				</div>
				<div id='letter_box'></div>
			</div>
		</div>
	</div>
	<div class="flex_row">
		<div id='timeline_plot' class='timeline'>
			<svg></svg>
		</div>
	</div>
	</div>
	<script src="js/jquery.min.js"></script>
	<script src="js/d3.v6.min.js"></script>
	<script src="js/graph.js"></script>
	<script src="js/birthyear_plot.js"></script>
	<script src="js/timeline.js"></script>
	<script src="js/letter.js"></script>
	<script src="js/introduction.js"></script>
	<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
	<script src="js/main.js"></script>
</body>